<script setup>
import { ref, provide } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
const xAxisData = [];
for (let i = 0; i < 30; i++) {
  xAxisData.push(i + "");
}
const option = ref({
  title: {
    text: "销售业绩图",
    subtext: "单位 (元)",
  },
  tooltip: {
    trigger: "item",
    // formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    left: "center",
    data: ["销售收入", "目标业绩"],
    color: ["#616BF2", "#DFE1FC"],
    selectedMode: "single", // 允许用户点击图例项来控制系列的显示
    selected: {
      系列1: true,
      系列2: true,
    },
  },
  xAxis: {
    type: "category",
    data: [...xAxisData],
  },
  // Y轴是动态的
  yAxis: {
    type: "value",
    axisLabel: {
      margin: 77,
      align: "left",
    },
  },
  series: [
    {
      name: "销售收入",
      data: [1200, 2000, 1500, 800, 700, 1100, 1030],
      type: "bar",
      showBackground: true,
    },
    {
      name: "目标业绩",
      data: [1200, 2000, 1500, 800, 700, 1100, 1030],
      type: "bar",
      showBackground: true,
      barGap: "-100%",
    },
  ],
});
</script>

<template>
  <div class="center_comp">
    <v-chart class="chart" :option="option" autoresize />

    <div class="right_box">
      <div class="title_box">
        <span>待办事项</span>
        <span>查看全部 ></span>
      </div>
      <div class="l_li">
        <div class="li_1">
          <span>审批</span>
          <span>王肖的采购申请审批</span>
        </div>
        <span class="li_2">2024-02-21</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.center_comp {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 7px 5px;

  .chart {
    width: 69%;
    height: 300px;
    border: 1px solid #eee;
  }

  .right_box {
    width: 29%;
    margin-right: 2px;
    height: 300px;
    border: 1px solid #eee;
    margin-left: 10px;
    display: flex;
    flex-direction: column;

    .title_box {
      width: 100%;
      height: 44px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;

      span:first-child {
        font-size: 15px;
        font-weight: bold;
        margin-left: 13px;
      }

      span:last-child {
        font-size: 13px;
        color: #888;
        margin-right: 13px;
      }
    }

    .l_li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 8px;
      border-bottom: 1px solid #eee;

      .li_1 {
        span:first-child {
          font-size: 14px;
          line-height: 30px;
          padding: 5px 10px;
          background-color: #24ca89;
          color: #fff;
          border-radius: 5px;
        }

        span:last-child {
          font-size: 12px;
          margin-left: 10px;
        }
      }

      .li_2 {
        font-size: 12px;
        color: #888;
      }
    }
  }
}
</style>
